<template>
	<view style="padding: 30rpx;">
		<view class="box">
			<uni-forms :modelValue="form" :rules="rules" ref="formRef" label-width="100rpx" label-align="left">
				<uni-forms-item label="头像" name="avatar">
					<uni-file-picker 
						limit="1" :image-styles="imageStyles" :del-icon="false" :disable-preview="true"
						fileMediatype="image" v-model="avatar" 
						@select="handleAvatarUploadSuccess">
					</uni-file-picker>
				</uni-forms-item>
				
				<uni-forms-item label="账号" name="username">
					<uni-easyinput type="text" v-model="form.username" placeholder="" disabled />
				</uni-forms-item>
				
				<uni-forms-item label="姓名" name="name">
					<uni-easyinput type="text" v-model="form.name" placeholder="请输入姓名" />
				</uni-forms-item>
				
				<uni-forms-item label="性别" name="sex">
					<uni-data-checkbox 
						style="position: relative; top: 10rpx;" 
						v-model="form.sex" :localdata="range">
					</uni-data-checkbox>
				</uni-forms-item>
				
				<uni-forms-item label="联系方式" name="phone">
					<uni-easyinput type="text" v-model="form.phone" placeholder="请输入电话" />
				</uni-forms-item>
				
				<uni-forms-item label="简介" name="information">
					<uni-easyinput type="text" v-model="form.information" placeholder="介绍一下你自己吧" />
				</uni-forms-item>
				
				<view style="display: flex;">
					<uni-forms-item>
						<button type="primary" size="mini" @click="save">保 存</button>
					</uni-forms-item>
					
					<uni-forms-item>
						<button size="mini" @click="toRePassword" style="background-color: greenyellow;">重设密码</button>
					</uni-forms-item>
				</view>
			</uni-forms>
		</view>
		
	</view>
</template>

<script>
	import config from '@/config.js';
	export default {
		data() {
			return {
				showModal: false,
				oldPassword:'',
				newPassword:'',
				confirmNewPassword:'',
				
				avatar: [],
				form: {},
				user: uni.getStorageSync('xm-user'),
				imageStyles: {
					"height": 80, // 边框高度
					"width": 80, // 边框宽度
					"border": { // 如果为 Boolean 值，可以控制边框显示与否
						"color": "#eee", // 边框颜色
						"width": "1px", // 边框宽度
						"style": "solid", // 边框样式
						"radius": "50%" // 边框圆角，支持百分比
					}
				},
				range: [
					{ text: '男', value: '男' },
					{ text: '女', value: '女' },
					{text: '保密', value: '保密'}
				]
			}
		},
		onLoad() {
			this.form = JSON.parse(JSON.stringify(this.user))
			this.avatar = [{
				url:this.user.avatar,
			}]
		},
		methods: {
			save() {
				
				console.log(this.avatar);
				let that = this;
				uni.request({
					url: config.baseUrl + '/users/update',
					data: this.form,
					method:'POST',
					
					success(res){
						if (res.data.code !== '200') {
							uni.setStorageSync('xm-user', that.form)
							console.log(uni.getStorageSync('xm-user'))
							uni.showToast({
								icon: "success",
								title: '操作成功'
							})
						} else {
							uni.showToast({
								icon: "error",
								title: '发生错误'
							})
						}
					}
				});
				
				uni.reLaunch({
					url:'/pages/my/my'
				})
			},
			
			handleAvatarUploadSuccess(e) {
				let that = this
				const filePath = e.tempFilePaths[0]
				console.log(filePath);
				
				uni.uploadFile({
					url: config.baseUrl + '/users/uploadFile', //自己的后端接口（默认发送post请求）
					filePath: filePath,
					name: "file", //这里应为自己后端文件形参的名字
					success(res) {
						console.log(res)
						let path = res.data
						that.form.avatar = path
					}
				})
			},
			
			toRePassword(){
				uni.navigateTo({
					url:'/pages/updatepwd/updatepwd'
				})
			}
		}
	}
</script>

<style scoped>
	
	
</style>
